<template>
  <div class="demo-select-multiple">
    <div
      class="column-divider"
      style="min-height: 6rem;">
      <div class="demo-button-line">
        <div class="d-title">选项较多换行</div>
        <e-select
          multiple
          v-model="values"
          style="width:300px">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value">{{ item.label }}</e-option>
        </e-select>
      </div>
      <div class="demo-button-line">
        <div class="d-title">有数量限制</div>
        <e-select
          v-model="limitValue"
          multiple
          :limited="3"
          style="width:300px">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value">{{ item.label }}</e-option>
        </e-select>
      </div>
    </div> 

    <!-- <div class="column-divider" style="min-height: 6rem;">
      <div class="demo-button-line">
        <div class="d-title">多选需要确认</div>
        <e-select
          v-model="limitValue1"
          multiple
          type="checkbox"
          confirm
          style="width:300px">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value">{{ item.label }}</e-option>
        </e-select>
      </div>
    </div> -->
    <div class="column-divider" style="min-height: 7rem;">
      <div class="demo-button-line">
        <div class="d-title">鼠标悬停时：下拉展开icon改为删除icon</div>
        <e-select
          v-model="limitValue2"
          multiple
          clearable
          style="width:300px">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value">{{ item.label }}</e-option>
        </e-select>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DemoSelectSize',
  data () {
    return {
      cityList: [
        {
          value: 'New York',
          label: 'New York'
        },
        {
          value: 'London',
          label: 'London'
        },
        {
          value: 'Sydney',
          label: 'Sydney'
        },
        {
          value: 'Ottawa',
          label: 'Ottawa'
        },
        {
          value: 'Paris',
          label: 'Paris'
        },
        {
          value: 'Canberra',
          label: 'Canberra'
        }
      ],
      values: [],
      limitValue: [],
      limitValue1: [],
      limitValue2: []
    }
  }
}
</script>
<style>
.demo-select-multiple .demo-button-line .d-title {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color:rgba(98,54,255,1);
  width: 20rem;
}
</style>
